<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>运行日志</title>
    <!--导入elementUI样式-->
    <link rel="stylesheet" href="../element-ui-2.13.0/lib/theme-chalk/index.css">
    <!--导入vue js文件-->
    <script src="../vue/vue-v2.6.10.js"></script>
    <script src="../vue/axios-0.18.0.js"></script>
    <!--导入elementUI js文件-->
    <script src="../element-ui-2.13.0/lib/index.js"></script>
</head>

<body>
    <div id="app">
        <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="开始时间" prop="startTime">
                        <el-date-picker v-model="ruleForm.startTime" type="datetime" placeholder="选择日期时间" >
                        </el-date-picker>
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="结束时间" prop="endTime">
                        <el-date-picker v-model="ruleForm.endTime" type="datetime" placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item>
                        <el-button type="primary" @click="search()">搜索</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item>
                        <el-button type="primary" @click="downExcel()">导出</el-button>
                    </el-form-item>
                </el-col>
            </el-row>


        </el-form>
        <el-table :data="dataList" :span-method="objectSpanMethod" border style="width: 100%">

            <el-table-column prop="serialNum" label="序号" width="50">
            </el-table-column>
            <el-table-column
                    prop="logContentCreateTime"
                    align="center"
                    label="日期时间"
                    width="180"
                    :formatter="formatDate">
            </el-table-column>
            </el-table-column>
            <el-table-column prop="stationName" label="厂站" width="100">
            </el-table-column>
            <el-table-column prop="content" label="内容" width="550">
            </el-table-column>
            <el-table-column prop="status" label="状态" width="50">
            </el-table-column>
            <el-table-column prop="type" label="类型" width="50">
            </el-table-column>
            <el-table-column prop="recorder" label="记录人" width="100">
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="handleEdit(scope.row.journalId)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.row.journalId)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>

        <!-- 删除弹窗 -->
        <!--<el-dialog title="删除确认" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
            <span>确定要删除吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="sureDel">确 定</el-button>
            </span>
        </el-dialog>-->

        <div class="pagination-container">
            <el-pagination
                    class="pagiantion"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.currentPage"
                    :page-size="pagination.pageSize"
                    layout="total, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: "#app",
        delId: null,
     
        data: {
            backend_url: "http://localhost:8081",
            ruleForm: {
                startTime:new Date(new Date(new Date().toLocaleDateString()).getTime()-24*60*60*1000),//开始时间
                endTime:new Date()//结束时间
            },
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize:10,//每页显示的记录数
                total:0//总记录数

            },
            dialogVisible: false, // 删除弹窗
            dataList: [/*{
                journalId: 1,
                serialNum:1,
                logContentCreateTime:'2020-05-16 16:12:03',
                stationName: '厂站',
                content:'内容',
                status:'状态',
                type: '类型',
                status: '普陀区',
                recorder:'记录人',
                contentList:[]
            },
            {
                journalId: 2,
                serialNum:2,
                logContentCreateTime:'2020-05-17 16:12:01',
                stationName: '厂站',
                content:'内容',
                status:'状态',
                type: '类型',
                status: '普陀区',
                recorder:'记录人',
                contentList:[]
            }
*/
            ],
            serialNumArr: [],
            serialNumPos: 0


        },
        created() {
            this.findPage();
        },
       /* mounted(){

        },*/
        methods: {
            handleClick(row) {
                console.log(row);
            },
            // 编辑
            handleEdit(journalId){
                window.location.href = window.location.origin + '/edit.html?journalId='+journalId
            },
            // 删除处理 start
            handleDel(id) {
                //点击删除按钮，弹出提示窗口
                this.$confirm('确定要删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.delId = id;
                    //console.log("journalId======"+this.delId)
                    //this.dialogVisible = true;
                    //console.log(this.dialogVisible)

                    axios.get(this.backend_url + "/deleteOneById?journalId=" + this.delId).then((res) => {
                        if (res.data.flag) {
                            this.$message({
                                message: res.data.message,
                                type: "success"
                            });
                            window.location.href = window.location.origin + '/operationLog.html'

                        }else{
                            this.$message({
                                type: 'error',
                                message:"删除失败"
                            });
                        }
                    })
                }).catch(() => {
                    //2.点击取消，什么都不做
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            /*sureDel() {
                // 删除id为 this.delId
                this.dialogVisible = false;
                console.log(this.delId)
            },*/
            //切换页码
            handleCurrentChange(currentPage) {
                this.pagination.currentPage = currentPage;
                this.findPage();
            },
            search(){//条件查询
                this.findPage();
            },
            //分页查询
            findPage() {
                //把分页需要的三个参数封装成一个对象
                var param = {
                    currentPage: this.pagination.currentPage,
                    pageSize: this.pagination.pageSize,
                    startTime:this.ruleForm.startTime,
                    endTime:this.ruleForm.endTime
                };
                //发送分页查询的请求
                axios.defaults.withCredentials = true;
                axios.post(this.backend_url + "/findByPage", param).then((res) => {
                   /* console.log(res);*/
                    //如果查询错误，提示错误信息
                    if (!res.data.flag) {
                        this.$message({
                            message: res.data.message,
                            type: "error"
                        });
                    }
                    //如果查询正确， 表格显示数据，分页数据展示
                    this.dataList = res.data.data.rows;
                    this.pagination.total = res.data.data.total;
                    this.merage();
                }).catch((err) => {
                    console.log(err);
                });
            },
            downExcel() {

                var param = {
                    currentPage: this.pagination.currentPage,
                    pageSize: this.pagination.pageSize,
                    startTime:this.ruleForm.startTime,
                    endTime:this.ruleForm.endTime
                };
                //发送分页查询的请求
                //axios.defaults.withCredentials = true;
                axios.post(this.backend_url + "/downExcel", param).then((res) => {
                    if(res.data){
                        this.$message({
                            message: '下载成功',
                            type: 'success'
                        });
                    }else{
                        this.$message.error('下载失败,请将打开该文件的相关应用关闭');
                    }

                })


            },
            //将日期格式化
            formatDate(row, column) {
                // 获取单元格数据
                let data = row[column.property]
                if(data == null) {
                    return null
                }
                let dt = new Date(data)
                return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
            },

            merageInit() {
                this.serialNumArr = [];
                this.serialNumPos = 0;
            },
            merage() {
                this.merageInit();
                //console.log("dataList========"+this.dataList)
                for (let i = 0; i < this.dataList.length; i += 1) {
                   /* console.log("i========"+i)*/

                    if (i === 0) {
                        // 第一行必须存在
                        this.serialNumArr.push(1);
                        this.serialNumPos = 0;
                    } else {
                        // 判断当前元素与上一个元素是否相同,eg：this.typeNamePos 是 this.typeNameArr序号
                        // 第一列
                        // eslint-disable-next-line no-lonely-if
                        if (this.dataList[i].serialNum === this.dataList[i - 1].serialNum) {
                            this.serialNumArr[this.serialNumPos] += 1;
                            this.serialNumArr.push(0);
                        } else {

                            this.serialNumArr.push(1);
                            this.serialNumPos = i;
                        }
                        // 第二列
                       /* if (this.skuListInfo[i].storeIdInfo === this.skuListInfo[i - 1].storeIdInfo && this.skuListInfo[i].name ===
                            this.skuListInfo[i - 1].name) {
                            this.storeArr[this.storePos] += 1;
                            this.storeArr.push(0);
                        } else {
                            this.storeArr.push(1);
                            this.storePos = i;
                        }
                        // 第三列
                        if (this.skuListInfo[i].feeType === this.skuListInfo[i - 1].feeType && this.skuListInfo[i].storeIdInfo
                            === this.skuListInfo[i - 1].storeIdInfo && this.skuListInfo[i].name ===
                            this.skuListInfo[i - 1].name) {
                            this.feeArr[this.feePos] += 1;
                            this.feeArr.push(0);
                        } else {
                            this.feeArr.push(1);
                            this.feePos = i;
                        }*/
                    }
                }
               /* console.log("serialNumArr====="+this.serialNumArr);*/
            },
            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                // if (columnIndex === 0) { // 用于设置要合并的列
                //   if (rowIndex % 2 === 0) { // 用于设置合并开始的行号
                //     return {
                //       rowspan: 2, // 合并的行数
                //       colspan: 1, // 合并的猎术, 设置为0则直接不显示
                //     };
                //   }
                //   return {
                //     rowspan: 0,
                //     colspan: 0,
                //   };
                // }
                if (columnIndex === 0) {
                    // 第一列的合并方法
                    const row1 = this.serialNumArr[rowIndex];
                    const col1 = row1 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
                    return {
                        rowspan: row1,
                        colspan: col1,
                    };
                } /*else if (columnIndex === 1) {
                    // 第二列的合并方法
                    const row2 = this.storeArr[rowIndex];
                    const col2 = row2 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
                    return {
                        rowspan: row2,
                        colspan: col2,
                    };
                } else if (columnIndex === 2) {
                    // 第三列的合并方法
                    const row3 = this.feeArr[rowIndex];
                    const col3 = row3 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
                    return {
                        rowspan: row3,
                        colspan: col3,
                    };
                }*/
            },


            handleClose() {
                this.dialogVisible = false;
            }
            // 删除处理 end
        }


    });
</script>
<style>
    a {
        text-decoration: none;
        color: #fff;
    }

    .el-dialog__body {
        text-align: center;
        font-size: 20px;
    }
</style>

</html>